<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2_3_2-1-列表排列</title>
</head>

<body>


  <!--载入vue.js-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="Application">

    <button @click="click_push">向列表尾部追加一个元素</button>
    <button @click="click_pop">删除列表尾部的一个元素</button>
    <button @click="click_unshift">向列表头部插入一个元素</button>
    <button @click="click_shift">删除列表头部的一个元素</button>
    <button @click="click_splice">对列表进行分割操作</button>
    <button @click="click_sort">对列表进行排序操作</button>
    <button @click="click_reverse">对列表进行逆序</button>
    <h1>排序</h1>
    <div v-for="(item, key, index) in list" :key="index">{{key}}->{{item}}</div>
  </div>

  <script>
    const App = {
      data() {
        return {
          list: [1, 2, 3, 4, "b", "a", "c",],
          msg: "简简单单的生活",
        };
      },



      methods: {


        //向列表尾部追加一个元素
        click_push() {
          this.list.push(this.msg);
        },

        //删除列表尾部的一个元素
        click_pop() {
          this.list.pop();
        },

        //把数组的第一个元素从其中删除，并返回第一个元素的值
        click_shift() {

          this.list.shift();
        },

        //向数组的开头添加一个或更多元素，并返回新的长度。
        click_unshift() {
          this.list.unshift(this.msg);
        },

        //对列表进行分割操作
        click_splice() {
          this.list.splice(1, 2, "a", "b");
          //从索引位置(index:1)删除，删除2个元素，并添加2个新元素来替代被删除的元素
        },

        //对列表进行排序操作
        click_sort() {
          this.list.sort();//按字母顺序排序
        },

        //对列表进行逆序
        click_reverse() {
          this.list.reverse();
        },
      },



    };

    Vue.createApp(App).mount("#Application");
  </script>
  <style>
    button {
      display: block;
      margin: 10px 0;
    }
  </style>
</body>

</html>